<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>users</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <script src="../plugins/jquery/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
    <style>
        .bg-mydark {
            background-color: rgb(244, 246, 249);
        }

        .content {
            background-color: rgb(244, 246, 249);
            text-align: center;
            height: 800px;
            padding: 100px 60px;
        }

        button {
            margin: 0 10px;
        }

        .fa-trash-alt {
            color: #d03535;
        }

    </style>
</head>

<body>
<div class="container-fluid">
    <div class="content">

        <form class="layui-form layui-form-pane">
            <!--                名称-->
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <div class="layui-input-inline">
                        <input type="text" id="p_name" class="layui-input">
                    </div>
                </div>
            </div>
            <!--                父节点-->
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">父节点</label>
                <div class="layui-input-inline">
                    <select lay-verify="required" id="fanode">

                    </select>
                </div>
            </div>
            <!--                查寻-->
            <div class="layui-form-item layui-inline">
                <button type="button" class="layui-btn" data-type="reload"  id="sel">综合查询</button>

            </div>
            <!--                添加-->

        </form>

        <!--                表格-->
        <table class="layui-hide" id="test" lay-filter="role">
        </table>
        <!--                表格./-->

        <!--                            修改模态框-->
        <div class="modal fade" id="modal2" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">修改</h4>
                    </div>
                    <input type="text" id="eid3" hidden>
                    <div class="modal-body">
                        <form class="layui-form layui-form-pane">
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">名称</label>
                                <div class="layui-input-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="p_name2" required/>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">描述</label>
                                <div class="layui-input-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="p_remark" required/>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">关闭
                        </button>
                        <button type="submit" class="layui-btn" onclick="update()">修改</button>
                    </div>
                </div>
            </div>
        </div>
        <!--                            修改模态框./-->

    </div>

</div>
<script type="text/html" id="barDemo">
    <button type='button' class='layui-btn-sm layui-btn layui-btn-primary' lay-event="update">
        <i class='fas fa-wrench'></i></button>
</script>
<script>

    var getAllRoles;
    var update ;

    <!--    查询-->
    $("#sel").on("click", function () {
        let p_name = $("#p_name").val()
        let fanode = $("#fanode").val()
        $.ajax({
            url: "reblursel",
            dataType: "json",
            data: {
                p_name: p_name,
                fanode: fanode
            },
            success: function (resp) {
                getAllRoles(resp)
            }
        })
    })


    layui.use(['table'], function () {
        var table = layui.table;
        let datas = []
        $.ajax({
            url: "getallpowers",
            dataType: "json",
            success: function (resp) {
                datas = resp
            }
        })

        getAllRoles=function (datas) {

            setTimeout(function () {
                table.render({
                    elem: '#test'
                    , id: "test"
                    // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[ //表头
                        {field: 'power_id', title: '编号', sort: true, fixed: 'left'}
                        , {field: 'power_name', title: '节点名称'}
                        , {field: 'power_faname', title: '父节点名称'}
                        , {field: 'power_remark', title: '描述'}
                        , {field: 'belong', title: '身份'}
                        , {fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo'}
                    ]]
                    , data: datas
                    , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        , groups: 3 //只显示 1 个连续页码
                        , first: false //不显示首页
                        , last: false //不显示尾页
                        , limit: 6
                    }
                });
            }, 500)

        }

        setTimeout(function () {
            //延迟加载
            getAllRoles(datas)
        }, 500);

        //事件
        table.on('tool(role)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === "update") {
                $('#modal2').modal('show')
                $.ajax({
                    url: 'getpowerbypid/' + data.power_id,
                    dataType: 'json',
                    success: function (resp) {
                        $("#p_name2").val(resp[0].power_name)
                        $("#p_remark").val(resp[0].power_remark)
                    }
                })
            }
            update = function (){
                let p_name2 = $("#p_name2").val()
                let p_remark =$("#p_remark").val()
                $.ajax({
                    url: 'updatepower',
                    dataType: 'json',
                    data:{
                        "power_id":data.power_id,
                        "power_name":p_name2,
                        "power_remark":p_remark
                    },
                    success: function (resp) {
                        if (resp === 1) {
                            layer.alert("修改成功")
                        }
                    }
                })
            }
        });
        //    事件
    })

    function load() {
        //动态加载父节点下拉框
        $.ajax({
            url: "getfanodes",
            dataType: "json",
            success: function (data) {
                console.log(data)
                let select = $("#fanode")
                for (let i = 0; i < data.length; i++) {
                    let element = data[i]
                    select.append(new Option(element.power_name, element.power_id));// 下拉菜单里添加元素
                }
                layui.form.render("select");
            }
        })
    }

    load()

</script>

</body>

</html>